document.addEventListener('DOMContentLoaded', function() {
    const sphere = document.querySelector('.sphere');
    const numElements = 24;
    const radius = 150;
    
    // 创建更复杂的轨道元素
    for (let i = 0; i < numElements; i++) {
        const element = document.createElement('div');
        element.className = 'orbiting-element';
        
        // 使用斐波那契球面分布算法获得均匀分布的点
        const y = 1 - (i / (numElements - 1)) * 2; // y goes from 1 to -1
        const radiusAtY = Math.sqrt(1 - y * y); // radius at y
        
        const theta = Math.PI * (3 - Math.sqrt(5)) * i; // golden angle increment
        
        const x = Math.cos(theta) * radiusAtY;
        const z = Math.sin(theta) * radiusAtY;
        
        // 转换为实际坐标
        const posX = x * radius;
        const posY = y * radius;
        const posZ = z * radius;
        
        // 设置3D变换
        const scale = 0.3 + (1 - (posZ + radius) / (2 * radius)) * 0.7;
        element.style.transform = `
            translate3d(${posX}px, ${posY}px, ${posZ}px) 
            scale(${scale})
        `;
        
        // 根据位置设置颜色
        const hue = (i / numElements) * 360;
        element.style.background = `hsl(${hue}, 80%, 60%)`;
        element.style.boxShadow = `0 0 15px hsl(${hue}, 80%, 60%)`;
        
        // 添加悬停效果
        element.addEventListener('mouseover', () => {
            element.style.transform = `
                translate3d(${posX}px, ${posY}px, ${posZ}px) 
                scale(${scale * 1.5})
            `;
            element.style.transition = 'transform 0.3s ease';
        });
        
        element.addEventListener('mouseout', () => {
            element.style.transform = `
                translate3d(${posX}px, ${posY}px, ${posZ}px) 
                scale(${scale})
            `;
        });
        
        sphere.appendChild(element);
    }
    
    // 更流畅的鼠标控制
    let currentX = 0;
    let currentY = 0;
    let targetX = 0;
    let targetY = 0;
    const easing = 0.05;
    
    document.addEventListener('mousemove', (event) => {
        targetX = (event.clientX - window.innerWidth / 2) * 0.0005;
        targetY = (event.clientY - window.innerHeight / 2) * 0.0005;
    });
    
    function animate() {
        currentX += (targetX - currentX) * easing;
        currentY += (targetY - currentY) * easing;
        
        sphere.style.transform = `
            rotateX(${currentY}rad) 
            rotateY(${currentX}rad)
        `;
        
        requestAnimationFrame(animate);
    }
    
    animate();
    
    // 添加触摸支持
    document.addEventListener('touchmove', (event) => {
        event.preventDefault();
        targetX = (event.touches[0].clientX - window.innerWidth / 2) * 0.0005;
        targetY = (event.touches[0].clientY - window.innerHeight / 2) * 0.0005;
    }, { passive: false });
});